<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        #timelogo {
            background: rgba(255, 255, 255, 0.5);
            /*关键点*/
            position: absolute;
            z-index: 1;
            /*确保在遮盖的元素的上方*/
            top: 0px;
            left: 0px;
            /* width: 350px;
            height: 350px; */
            border-radius: 24px;
        }

        .logo {
            position: absolute;
            left: 0px;
            top: 0px
        }
    </style>
</head>

<body>
    <!-- <img src="./bg.png" width="350" height="350" class="logo"> -->
    <canvas id="timelogo" width="1024" height="1024"></canvas>
</body>
<script type="text/javascript">

    window.onload = function () {

        loadlogo(2.93)
    }

    function loadlogo(sizenum) {
        var s = document.getElementById("timelogo")
        var c = s.getContext("2d")

        c.beginPath()
        c.moveTo(0 * sizenum, 0 * sizenum)
        c.lineTo(118 * sizenum, 0 * sizenum)
        c.lineTo(75 * sizenum, 86 * sizenum)
        c.lineTo(175 * sizenum, 137 * sizenum)
        c.lineTo(79 * sizenum, 333 * sizenum)
        c.lineTo(113 * sizenum, 350 * sizenum)
        c.lineTo(0 * sizenum, 350 * sizenum)
        c.fillStyle = "#ffc007"
        c.fill()

        //左上（橙色）
        c.beginPath()
        c.moveTo(0 * sizenum, 0 * sizenum)
        c.lineTo(88 * sizenum, 0 * sizenum)
        c.lineTo(45 * sizenum, 86 * sizenum)
        c.lineTo(145 * sizenum, 137 * sizenum)
        c.lineTo(49 * sizenum, 333 * sizenum)
        c.lineTo(83 * sizenum, 350 * sizenum)
        c.lineTo(0 * sizenum, 350 * sizenum)
        //创建渐变对象
        var gr = c.createLinearGradient(0 * sizenum, 0 * sizenum, 100 * sizenum, 0 * sizenum)
        //颜色断点
        gr.addColorStop(0, 'rgb(255,193,7)')
        gr.addColorStop(.5, 'rgb(255,193,7)')
        gr.addColorStop(1, 'rgb(255,161,0)')
        c.fillStyle = gr
        c.fill()
        // c.stroke()

        c.beginPath()
        c.moveTo(118 * sizenum, 0 * sizenum)
        c.lineTo(350 * sizenum, 116 * sizenum)
        c.lineTo(350 * sizenum, 0 * sizenum)
        //创建渐变对象
        var gr1 = c.createLinearGradient(350 * sizenum, 0 * sizenum, 300 * sizenum, 100 * sizenum)
        //颜色断点
        gr1.addColorStop(0, 'rgb(101,129,143)')
        gr1.addColorStop(.7, 'rgb(101,129,143)')
        gr1.addColorStop(1, 'rgb(72,94,104)')
        c.fillStyle = gr1
        c.fill()
        // c.stroke()

        c.beginPath()
        c.moveTo(190 * sizenum, 350 * sizenum)
        c.lineTo(272 * sizenum, 184 * sizenum)
        c.lineTo(380 * sizenum, 236 * sizenum)
        c.lineTo(380 * sizenum, 350 * sizenum)
        c.fillStyle = "#9e9e9e"
        c.fill()

        c.beginPath()
        c.moveTo(160 * sizenum, 350 * sizenum)
        c.lineTo(242 * sizenum, 184 * sizenum)
        c.lineTo(350 * sizenum, 236 * sizenum)
        c.lineTo(350 * sizenum, 350 * sizenum)
        //创建渐变对象
        var gr2 = c.createLinearGradient(240 * sizenum, 180 * sizenum, 350 * sizenum, 350 * sizenum)
        //颜色断点
        gr2.addColorStop(0, 'rgb(119,119,119)')
        gr2.addColorStop(.4, 'rgb(158,158,158)')
        gr2.addColorStop(1, 'rgb(158,158,158)')
        c.fillStyle = gr2
        c.fill()
        // c.stroke()
    }

</script>

</html>